<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" manifest="cache.manifest">
	<!--
     * Copyright (C) 2012 Matt Gumbley, DevZendo.org <http://devzendo.org>
     *
     * Licensed under the Apache License, Version 2.0 (the "License");
     * you may not use this file except in compliance with the License.
     * You may obtain a copy of the License at
     *
     *         http://www.apache.org/licenses/LICENSE-2.0
     *
     * Unless required by applicable law or agreed to in writing, software
     * distributed under the License is distributed on an "AS IS" BASIS,
     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     * See the License for the specific language governing permissions and
     * limitations under the License.
	-->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
		
        <link rel="stylesheet" href="lib/iui/iui.css" type="text/css" />
        <link rel="stylesheet" title="Default" href="lib/iui/t/default/default-theme.css" type="text/css"/>
        <link rel="stylesheet" href="lib/mobiscroll/css/mobiscroll-2.0.3.full.min.css" type="text/css" />
        <link rel="stylesheet" href="datediff.css" type="text/css" />
		
        <script type="application/x-javascript" src="lib/iui/iui.js"></script>
		<script type="text/javascript" src="lib/jquery/jquery-1.8.2.js"></script>
        <script type="application/x-javascript" src="lib/mobiscroll/js/mobiscroll-2.0.3.full.min.js"></script>
        <script type="application/x-javascript" src="datediff.js"></script>

        <title>DateDiff</title>
    </head>
    <body onload="startup()">
        <div class="toolbar"">
            <h1 id="pageTitle"></h1>
            <a id="backButton" class="button" href="#"></a>
        </div>
				
        <div class="panel" title="DateDiff" selected="true" id="home">
            <ul id="groupsAndFavs">
                <li id="groupsLi"><a href="#groups">Groups</a></li>
                <li><a>(favourites go here)</a></li>
            </ul>
            <ul>
                <li><a href="#storage">Storage</a></li>
				<li><a href="#help">Help</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </div>

        <div class="panel" title="Groups" id="groups">
            <ul>
            </ul>

            <a class="whiteButton" id="newGroupButton" onClick="newGroup();">New Group</a>
        </div>

        <div class="panel" title="Dates" id="dates">
            <ul>
            </ul>

            <a class="whiteButton" id="newDateButton">New Event</a>
			<a class="grayButton" id="renameGroupButton">Rename Group</a>
			<a class="redButton" id="deleteGroupButton">Delete Group</a>
        </div>

        <div class="panel" title="Date" id="datePanel">
           <fieldset>
              <div class="row">
                  <label>Name</label>
                  <input type="text" id="dateName" border="1" value="" autocorrect="on"/>
              </div>
              <div class="row">
                  <table border="0" cellpadding="2" cellspacing="4" width="100%">
                    <tr>
                        <th colspan="2">Time between dates A and B</th>
                    </tr>
                    <tr>
                         <td id="numYears" align="right" width="50%">29</td>
                         <td align="left" width="50%">years</td>
                    </tr>
                    <tr>
                         <td id="numMonths" align="right" width="50%">9</td>
                         <td align="left" width="50%">months</td>
                    </tr>
                    <tr>
                         <td id="numDays" align="right" width="50%">9</td>
                         <td align="left" width="50%">days</td>
                    </tr>
                    <tr>
                         <th id="numTotalDays" align="right" width="50%">3570</th>
                         <th align="left" width="50%">days</th>
                    </tr>
                  </table>
              </div>
              <div class="row">
  	              <table border="0" cellpadding="5" cellspacing="2" width="100%">
  	              	<tr>
                        <th>Date A &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="toggleLockA"><img id="lockAImg" src="54-lock.png"></a></th>
						<th align="center"><a id="toggleFavIcon"><img id="favImg" src="28-star-yellow.png"></a></th>
                        <th><a id="toggleLockB"><img id="lockBImg" src="54-lock.png"></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Date B</th>
					</tr>
                    <tr>
                    	 <td height="32px" valign="top"><a class="button autoButton" style="left: 32px;" id="editDateA" href="#dateDialog"></a></td>
                         <td align="center"><a id="editNoteIcon"><img id="noteImg" src="14-tag-blue.png"></a></td>
						 <td height="32px" valign="top"><a class="button autoButton" style="left: 62%;" id="editDateB" href="#dateDialog"></a></td>
                    </tr>
                  </table>
              </div>
		   </fieldset>
           <a class="redButton" id="deleteEventButton">Delete Entry</a>
        </div>

        <form class="dialog" id="dateDialog">
            <fieldset>
                <h1 id="dateChooserTitle">Choose Date A</h1>
                <a class="button leftButton" type="cancel">Cancel</a>
                <a class="button blueButton" type="cancel" id="dateOkButton">Ok</a>
                <p>
                <input id="date" name="i" style="display:none" class="scroller"/>
            </fieldset>
        </form>    

        <form class="dialog" id="noteDialog">
            <fieldset>
                <h1>Note</h1>
                <a class="button leftButton" type="cancel">Cancel</a>
                <a class="button blueButton" type="cancel" id="noteOkButton">Ok</a>
                <p>
                <textarea id="note" class="tallTextArea"></textarea>
            </fieldset>
        </form>    

        <form class="dialog" id="groupNameDialog">
            <fieldset>
                <h1>Group Name</h1>
                <a class="button leftButton" type="cancel">Cancel</a>
                <a class="button blueButton" type="cancel" id="groupNameOkButton">Ok</a>
                <p>
                <textarea id="name" class="tallTextArea"></textarea>
            </fieldset>
        </form>    

        <div class="panel" title="About" id="about">
            <fieldset>
                <div class="row">
					<p align="center">
                	    <strong>DateDiff v0.1</strong><br>
					    <a target="_new" href="http://devzendo.org"><img src="Banner.png"></a><br>
					    <font size="-1"><em>&copy; 2012 Matt Gumbley</em></font><br>
					</p>
				</div>
                <div class="row">
                    <a target="_new" href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache License v2.0</a>
                </div>
                <div class="row">
                    <a target="_new" href="http://www.iui-js.org/">iUI iPhone Web Framework</a>
					<a target="_new" href="http://mobiscroll.com/">Mobiscroll Date Picker</a>
					<a target="_new" href="http://jquery.com/">jQuery JavaScript Library</a>
					<a target="_new" href="http://glyphish.com/">Icons from Glyphish</a>
                </div>
            </fieldset>
        </div>

        <div class="panel" title="Help" id="help">
            <ul>
            	<li><a href="#helpFirst">Important! Read me first!</a></li>
				<li><a href="#helpOverview">What DateDiff does</a></li>
                <li><a href="#helpGroups">Help on Groups</a></li>
                <li><a href="#helpFav">Help on Favourites</a></li>
                <li><a href="#helpEvents">Naming Events</a></li>
                <li><a href="#helpEventsNotes">Adding Notes to Events</a></li>
                <li><a href="#helpEventsDates">Dates and Locking</a></li>
				<li><a href="#helpStorage">Help with Storage</a></li>
            </ul>
        </div>
		
		<div class="panel" title="Important" id="helpFirst">
			<font size="-1">
				DateDiff stores its information in your browser's local data store.
				It's not stored in the cloud, although it might be backed up when
			    you sync with iTunes.
				<br><br>
				No Internet connection is needed for DateDiff - the 'app' is now
				stored in your browser cache, but if you clear this out, it will 
				need to be downloaded again.
				<br><br>
				<strong>So, it's important that you back up your DateDiff data.</strong>
				<br><br>
                This is done by sending it to yourself as an email. This can then be
				pasted back into DateDiff.
                <br><br>

				Please read the help pages on storage for more information on 
	            backing up your DateDiff data.
			</font>
        </div>

        <div class="panel" title="Overview" id="helpOverview">
            <font size="-1">
                DateDiff stores important dates and calculates durations
                between pairs of dates (either or both of which can be
                locked to 'today').
				<br><br>
                Durations are shown in years, months and days, and total
                number of days.
				<br><br>
				<strong>Past:</strong> You can show a duration in the past by
				setting Date A to the date in the past, then locking Date B to
				'today'. e.g. How long have I been working at this company?
				<br><br>
				<strong>Future:</strong> You can show a duration in the future
				by locking Date A to 'today' and setting Date B to the date in
				the future. e.g. How long will it be until I retire?
				<br><br>
				<strong>Duration:</strong> You can calculate the duration
				between two dates by setting both, without locking. e.g. How
				long was Margaret Thatcher prime minister of the UK?
            </font>
        </div>

        <div class="panel" title="Groups" id="helpGroups">
            <font size="-1">
            	The date events you store can be put into groups, e.g.
				Birthdays, Projects, Residences, etc.,
				<br><br>
				Groups can be added by choosing <em>Groups</em> from the home
				screen, then <em>Add Group</em>.
				<br><br>
				A group can be deleted by choosing it from the groups screen,
				then, <em>Delete Group</em>. You will be asked to confirm that
				you really want to delete the group.
				<br><br>
				Currently, you cannot move events between groups.
        	</font>
        </div>
 		
        <div class="panel" title="Favourites" id="helpFav">
            <font size="-1">
                Date events can be marked as a favourite by choosing them from
				their group list, then tapping the star:
				<table border="0" cellpadding="5" cellspacing="2" width="100%">
					<tr>
						<td><img src="28-star.png"></td>
						<td>Not a favourite</td>
					</tr>
                    <tr>
                        <td><img src="28-star-yellow.png"></td>
                        <td>It's a favourite</td>
                    </tr>
				</table>
				Favourite events are shown on the home screen, in addition to
				showing them in their group list. Events that are not favourites
				are only shown in their group list.
            </font>
        </div>

        <div class="panel" title="Naming" id="helpEvents">
            <font size="-1">
            	Each event has a name, and this cannot be a duplicate of any other
				event name (in any group). It cannot be empty (how will you
				know what the event is about?).
				<br><br>
				To change an event's name, tap it, from the event page to show
				the name edit dialog.
				If you choose <em>Ok</em>, the changed name is saved and is
				shown in the event page and the event's group list. 
            </font>
        </div>

        <div class="panel" title="Notes" id="helpEventsNotes">
            <font size="-1">
            	Events can have a note stored with them. This isn't shown in the
				event page, but you can see that a note is set by looking at the
				note icon. Tap the note icon to change the note.
                <table border="0" cellpadding="5" cellspacing="2" width="100%">
                    <tr>
                        <td><img src="14-tag.png"></td>
                        <td>No note for this event</td>
                    </tr>
                    <tr>
                        <td><img src="14-tag-blue.png"></td>
                        <td>There's a note for this event</td>
                    </tr>
                </table>
            </font>
        </div>

        <div class="panel" title="Dates/Locks" id="helpEventsDates">
            <font size="-1">
                You can set either or both of Date A and B, or lock them to 
				'today'. The lock for either Date A or B can be toggled by
				tapping the lock icon. Unlocking a date reverts it to the 
				last-chosen date.
                <table border="0" cellpadding="5" cellspacing="2" width="100%">
                    <tr>
                        <td><img src="54-lock-grey.png"></td>
                        <td>Not locked, tap the date button to choose the date</td>
                    </tr>
                    <tr>
                        <td><img src="54-lock.png"></td>
                        <td>Locked to today</td>
                    </tr>
                </table>
            </font>
        </div>

        <div class="panel" title="Storage" id="helpStorage">
            <font size="-1">
	            To ensure your DateDiff data is backed up, you can send it in an
				email to yourself. The data is sent in JavaScript Object Notation
				(JSON) form. Just file the email away somewhere safe.
				<br>
				<br>
	    		If the data is ever removed from your browser
				cache, you can paste this JSON data from the email you sent, back
				into DateDiff. 
            </font>
        </div>
		
        <div class="panel" title="Storage" id="storage">
            <ul>
	            <li><a href="#exportEmail">Export to an Email</a></li>
	            <li><a href="#importEmail">Import from an Email</a></li>
				<li><a href="#seeJson">View data as JSON</a></li>
				<li><a class="redrow" href="#deleteAllData">Delete all data</a></li>
            </ul>
        </div>
		
        <div class="panel" title="Import" id="importEmail">
            <font size="-1">
	        	Paste the contents of an email export into the box below, and then
				tap "Import from Email". (You can paste the 'Sent from my ...'
				signature, import ignores it.)
				<br>
	            <br>
				<font color="#f00">THIS WILL REPLACE ALL YOUR EXISTING DATA!</font>
			</font>
            <br>
            <br>
			<textarea id="importEmailJson" class="tallTextArea"></textarea>
            <br>
            <br>
            <a class="redButton autoButton" style="position: relative;" align="center" id="importEmailButton">Import from Email</a>
        </div>

        <div class="panel" title="Export" id="exportEmail" onfocus="setExportMailto();">
            <font size="-1">
	            Press "Export by Email" to send an email to yourself
	            containing an export of your data. 
				<br>
				This can later be imported by copying
	            it from the email and pasting it into the import screen.
            </font>
            <br>
            <br>
            <a class="grayButton autoButton" style="position: relative;" align="center" id="exportEmailButton">Export by Email</a>
        </div>

        <div class="panel" title="JSON Dump" id="seeJson" onfocus="seeJson();">
        	<textarea id="json" class="fullTextArea"></textarea>
        </div>

        <div class="panel" title="Delete" id="deleteAllData">
            Pressing "Delete All Data" below will remove all groups and events.
			Make sure you have an export of your data before doing this.
			<br>
			<br>
            <a class="redButton autoButton" style="position: relative;" align="center" id="deleteAllDataButton">Delete All Data</a>
        </div>

    </body>
</html>
